<!--条形进度条-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'ProgressBarComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          marginLeft: 5,
          marginRight: 40,

          totalSteps: 100,
          stokeWidth: 20,
          startColor: '',
          stopColor: '',
          innerStrokeColor: '#323232',

          showLabel: true,
          prefixText: '',
          suffixText: '%',
          textColor: '#fff',
          labelPosition: 'right'
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            'value': 46
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption () {

        let option = {
          grid: {
            top: '0',
            left: this.component.compConfigData.chartOption.marginLeft,
            right: this.component.compConfigData.chartOption.marginRight,
            bottom: '0',
          },
          xAxis: {
            type: 'value',
            max: this.component.compConfigData.chartOption.totalSteps,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [{
            type: 'category',
            inverse: false,
            dat: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show:false,
            }
          }],
          series: [{ //内
            type: 'bar',
            barWidth: this.component.compConfigData.chartOption.stokeWidth, // 宽度
            label: {
              normal: {
                show: this.component.compConfigData.chartOption.showLabel,
                position: this.component.compConfigData.chartOption.labelPosition,
                textStyle: {
                  color: this.component.compConfigData.chartOption.textColor
                },
                formatter: (e) => {
                  return this.component.compConfigData.chartOption.prefixText +
                    (e.value / this.component.compConfigData.chartOption.totalSteps * 100).toFixed(0)
                    + this.component.compConfigData.chartOption.suffixText
                }
              }
            },
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              barBorderRadius: 30,
              color: {
                colorStops: [{
                  offset: 0,
                  color: this.component.compConfigData.chartOption.startColor
                    ? this.component.compConfigData.chartOption.startColor: this.currentEchartThemeColors[0] // 0% 处的颜色
                }, {
                  offset: 1,
                  color: this.component.compConfigData.chartOption.stopColor
                    ? this.component.compConfigData.chartOption.stopColor : this.currentEchartThemeColors[7] // 100% 处的颜色
                }],
              } //底色
            },
            data: [this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0].value]
          },
            { //框
              type: 'bar',
              barWidth: this.component.compConfigData.chartOption.stokeWidth, // 宽度
              barGap: '-100%',
              label: {
                normal: {
                  show: false,
                  position: 'right',
                  textStyle: {
                    color: '#000'
                  }
                }
              },
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: this.component.compConfigData.chartOption.innerStrokeColor, //底色
                }
              },
              data: [this.component.compConfigData.chartOption.totalSteps],
              z: 1,
            },

          ]
        };

        // 下面这一段代码用于合并组件的扩展配置，不可删除
        try {
          option = this.$PnUtil.deepMerge(option, JSON.parse(this.component.compConfigData.customOption));
        } catch (e) {
          this.$Message.error(e.message)
        }

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
